<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="utf-8">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Webapps: Collect of Pure [.css .html .js .wasm] Application</title>
    <style>
        html, body{
            margin: 0;
            padding: 0;
        }
        body{
            width: 100vw;
            height: 100vh;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: auto;
        }
        html{
            font-size: 5vmin;
        }
        #main{
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-between;
            align-items: baseline;
            background-color: #2b2a33;
            width: 100vw;
            height: 100vh;
        }

        #main #head{
            flex-grow: 3;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: center;
            border-bottom: 1px solid #cccccc;
            background-color: #292638;
            width: 100%;
        }
        #main #head #time{
            flex-basis: 10rem;
            color: #A0A0A0;
            text-shadow: 7px -7px #221f31;
        }

        #main #box{
            flex-grow: 15;
            width: 100%;
            overflow: auto;
        }
        #main #box #title{
            font-size: 0.9rem;
            text-shadow: 2px 2px #3e3e3e;
            text-align: center;
            margin-top: 1vmin;
            margin-bottom: 1vmin;
        }
        #main #box #list{
            display: flex;
            flex-flow: column nowrap;
            justify-content: space-around;
            align-items: center;
        }
        #main #box #list .app-item{
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: center;
            text-align: center;
            overflow: auto;
            border: 2px solid #606060;
            border-radius: 6px;
            width: 90%;
            min-height: 4rem;
            margin-top: 1rem;
            margin-bottom: 1rem;
        }
        #main #box #list .app-item:hover{
            border-color: #dddddd;
        }
        #main #box #list .app-item #name{
            flex-grow: 3;
            text-decoration: none;
            color: #a0a0a0;
            font-size: 1.1rem;
            text-shadow: -2px 2px #0c0c0c;
        }
        #main #box #list .app-item #name:hover{
            color: #d0d0d0;
            text-shadow: -3px 3px #0c0c0c;
        }
        #main #box #list .app-item #title{
            flex-grow: 7;
            color: #808080;
            font-size: 0.75em;
            line-height: 1.2em;
            max-width: 70%;
        }

        #main #tail{
            flex-grow: 2;
            display: flex;
            flex-flow: row nowrap;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid #cccccc;
            background-color: #121219;
            width: 100%;
        }
        #main #tail #copyright{
            font-size: 0.5rem;
            color: #bbbbbb;
        }

        ux-template{
            display: none;
        }
    </style>
</head>
<body style="display: none;">
    <div id="main">
        <div id="head">
            <div id="time" class="label"></div>
        </div>
        <div id="box">
            <div id="title">
                <div class="label" style="color: #a7a6b1;">纯粹JaveScript+HTML+CSS+WASM技术栈的应用集</div>
                <div class="label" style="font-size: 0.85em; color:#262626;">Collect of Pure Web Application</div>
            </div>
            <div id="list"></div>
        </div>
        <div id="tail">
            <label id="copyright">Copyright® clonne/2024 Abyss Software</label>
        </div>
    </div>
</body>
<ux-template id="app-item">
    <div class="app-item">
        <a id="name" href="#" target="_blank"></a>
        <div id="title" class="label"></div>
    </div>
</ux-template>
<script>document.write(((a,b)=>(`${a}t type="module" src="module/index.js?fuck=${Date.now()}">${b}t>`))("<scrip","</scrip"))</script>
</html>
